// 页面加载时初始化
document.addEventListener('DOMContentLoaded', () => {


    // 获取表格的 tbody 元素
    const tableBody = document.querySelector(".table");

    // 向后端发起 GET 请求
    fetch("/class/query/students") // 替换为实际的学生数据接口路径
        .then(response => response.json()) // 解析响应为 JSON
        .then(data => {
            // 遍历返回的 JSON 数据
            data.data.forEach(course => {
                // 创建一个新的 tr 元素
                const row = document.createElement("tr");
                row.Sid = course.Sid;
                row.Cid = course.Cid;
                // 插入学生信息到表格行中，并添加删除按钮
                row.innerHTML = `
                    <td>${course.Sname}</td>
                    <td>${course.Cname}</td> 
                    <td>course.status</td>
                    <td id="score-${course.id}" >${course.score}</td>
                    <td><button class="btn btn-info" onclick="showCourseDetailModal(this)" data-id="${course.id}">✍️ 打分</button></td>
                `;

                // 将行添加到表格中
                tableBody.appendChild(row);
            });
        })

        .catch(error => {
            console.error("获取course数据时出错:", error);
        });

    updateCourseSelect();
});

function showCourseDetailModal(button){

    var courseId = button.getAttribute('data-id');
    document.getElementById('scoreModal').dataset.id = courseId;
    document.getElementById('scoreModal').style.display = 'block';

}

function closeCourseDetailModal(){

    document.getElementById('scoreModal').style.display = 'none';

}


// 全局变量来保存当前选中的行
var currentRow = null;

// 确认更新分数
function updateScore() {

    var newScore = document.getElementById('currentScore').value;

    var scoreId = document.getElementById('scoreModal').dataset.id;
    document.getElementById(`score-${scoreId}`).textContent = newScore;

    closeCourseDetailModal();
    
    // 更新分数到服务器（这里应该调用后端API）
    fetch('/teacher/score/update/' + courseId, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({score: newScore})
    })
    .then(response => {
        if (response.ok) {
            alert('分数更新成功');
            $('#courseDetailModal').modal('hide');
            // 更新表格中的分数
            if (currentRow) {
                currentRow.querySelector('.score-cell').textContent = newScore;
            }
        } else {
            alert('分数更新失败');
        }
    });
}

function updateCourseSelect() {

    const select = document.getElementById('courseSelect');
    select.innerHTML = '';
    // 向后端发起 GET 请求
    fetch("/teacher/course") // 替换为实际的学生数据接口路径
        .then(response => response.json()) // 解析响应为 JSON
        .then(data => {
            // 遍历返回的 JSON 数据
            data.data.forEach(classes => {

                    const option = document.createElement('option');
                    option.textContent = classes;
                    select.appendChild(option);

            })
        .catch(error => {
            console.error("获取学生数据时出错:", error);
        });



  });
}

document.getElementById('courseSelect').addEventListener('change', function() {


  const selectedCourse = this.value;
  // 调用获取后端数据的函数
  fetchCourseData(selectedCourse);



});

function fetchCourseData(selectedCourse) {


    const tableBody = document.querySelector(".table");
  // 这里使用fetch API向后端发起请求，你需要根据实际情况修改URL
  fetch(`/api/course/${selectedCourse}`)
    .then(response => response.json())
    .then(data => {
      // 更新页面上的内容
        // 遍历返回的 JSON 数据
        data.data.forEach(course => {
            // 创建一个新的 tr 元素
            const row = document.createElement("tr");
            // 插入学生信息到表格行中，并添加删除按钮
            row.innerHTML = `
                    <td>${course.Sname}</td>
                    <td>${course.Cname}</td> 
                    <td>course.status</td>
                    <td id="score-${course.id}" >${course.score}</td>
                    <td><button class="btn btn-info" onclick="showCourseDetailModal(this)" data-id="${course.id}">✍️ 打分</button></td>
                `;

            // 将行添加到表格中
            tableBody.appendChild(row);
        });



      // 可以根据需要继续更新其他元素
    })
    .catch(error => console.error('Error fetching course data:', error));
}

function searchCourse() {
    // 获取用户输入的课程名
    const courseName = document.getElementById('courseNameInput').value;
    const studentName = document.getElementById('studentNameInput').value;

    // 向后端发送请求
    fetch(`/api/courses?name=${encodeURIComponent(courseName)}&name=${encodeURIComponent(studentName)}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.json())  // 解析响应数据为 JSON 格式
        .then(data => {
            // 数据可视化 - 这里使用 table 替代列表形式展示数据
            const container = document.getElementById('table');
            container.innerHTML = '';  // 清空之前的结果

            if (data.length === 0) {
                container.innerText = '未找到相关课程信息';
                return;
            }

            // 创建表格来展示课程信息
            const table = document.createElement('table');
            table.style.width = '100%';
            table.setAttribute('border', '1'); // 添加边框

            // 表头
            let headerRow = table.insertRow();
            let headerCell1 = document.createElement('th');
            headerCell1.textContent = '课程名';
            let headerCell2 = document.createElement('th');
            headerCell2.textContent = '描述';
            headerRow.appendChild(headerCell1);
            headerRow.appendChild(headerCell2);

            // 表内容
            data.data.forEach(course => {
                const row = table.insertRow();
                const cell1 = row.insertCell();
                const cell2 = row.insertCell();
                cell1.textContent = course.name;
                cell2.textContent = course.description;
            });

            container.appendChild(table);
        })
        .catch(error => {
            console.error('Error:', error);
            alert('查询过程中发生错误，请查看控制台获取详细信息');
        });
}
